{% extends 'base/base.html' %}
{% load static %}

{% block title %}
    searchPage
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="../../static/css/base/side.css">
    <link rel="stylesheet" href="../../static/css/news/search.css">
{% endblock %}

{% block main %}
    <main id="main">
        <div class="w1200 clearfix">
            <!-- main-contain start  -->
            <div class="main-contain ">
                <!-- search-box start -->
                <div class="search-box">
                    <form action="" style="display: inline-flex;">

                        <input type="search" placeholder="请输入要搜索的内容" name="q" class="search-control">

                        <input type="submit" value="搜索" class="search-btn">
                    </form>
                    <!-- 可以用浮动 垂直对齐 以及 flex  -->
                </div>
                <!-- search-box end -->
                <!-- content start -->
                <div class="content">
                    <!-- search-list start -->
                    <!-- search-list end -->
                    <!-- news-contain start -->
                    <div class="news-contain">
                        <div class="hot-recommend-list">
                            <h2 class="hot-recommend-title">共{{ page.paginator.num_pages }}页/第{{ page.number }}页</h2>
                            <ul class="news-list">
                                {% if show %}
                                    {% for hot_news in page %}
                                        <li class="news-item clearfix">
                                            <a href="#" class="news-thumbnail">
                                                <img src="../../static/images/python_gui.jpg">
                                            </a>
                                            <div class="news-content">
                                                <h4 class="news-title">
                                                    <a href="#">{{ hot_news.news.title }}</a>
                                                </h4>
                                                <p class="news-details">
                                                    {{ hot_news.news.digest }}
                                                </p>
                                                <div class="news-other">
                                                    <span class="news-type">{{ hot_news.news.tag.name }}</span>
                                                    <span class="news-time">{{ hot_news.update_time }}</span>
                                                    <span class="news-author">{{ hot_news.news.author.username }}</span>
                                                </div>
                                            </div>
                                        </li>
                                    {% endfor %}
                                {% else %}
                                    {% load highlight %}
                                    {% for news in page %}
                                        <li class="news-item clearfix">
                                            <a href="#" class="news-thumbnail">
                                                <img src="../../static/images/python_gui.jpg">
                                            </a>
                                            <div class="news-content">
                                                <h4 class="news-title">
                                                    <a href="#">{% highlight news.title with query css_class "highlight" %}</a>
                                                </h4>
                                                <p class="news-details">
                                                    {% highlight news.digest with query css_class "highlight" %}
                                                </p>
                                                <div class="news-other">
                                                    <span class="news-type">{{ news.object.tag.name }}</span>
                                                    <span class="news-time">{{ news.object.update_time }}</span>
                                                    <span class="news-author">{% highlight news.object.author.username with query css_class "highlight" %}</span>
                                                </div>
                                            </div>
                                        </li>
                                    {% endfor %}
                                {% endif %}

                            </ul>
                            <!--分页功能-->
                            <div class="page-box" id="pages">
                                <div class="pagebar" id="pagebar">
                                    {% if page.has_previous %}
                                        <a class="prev" href="{% url 'news:search' %}?q={{ query }}&page={{ page.previous_page_number }}">上一页</a>
                                    {% else %}
                                        <a class="prev" href="#">上一页</a>
                                    {% endif %}
                                    {% load news_template %}
                                    {% for n in page|page_bar %}
                                        {% if n == '...' %}
                                            <span class="point">{{ n }}</span>
                                        {% else %}
                                            {% if n == page.number %}
                                                <span class="sel">{{ n }}</span>
                                            {% else %}
                                                <a href="{% url 'news:search' %}?page={{ n }}&q={{ query }}">{{ n }}</a>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}

                                    {% if page.has_next %}
                                        <a class="next" href="{% url 'news:search' %}?q={{ query }}&page={{ page.next_page_number }}">下一页</a>
                                    {% else %}
                                        <a class="next" href="#">下一页</a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- news-contain end -->
                </div>
                <!-- content end -->
            </div>
            <!-- main-contain  end -->
            <!-- side start -->
            <aside class="side">
                <div class="side-activities">
                    <h3 class="activities-title">在线课堂<a href="javascript:void(0)">更多</a></h3>
                    <div class="activities-img">
                        <a href="javascript:void(0);" target="_blank">
                            <img src="https://res.shiguangkey.com//file/201804/26/20180426142628123364782.jpg"
                                 alt="title">
                        </a>
                        <p class="activities-tips">对话国外小姐姐</p>
                    </div>
                    <ul class="activities-list">
                        <li>
                            <a href="javascript:void(0);" target="_blank">
                                <span class="active-status active-start">报名中</span>
                                <span class="active-title"><a href="https://www.shiguangkey.com/course/2432"> Django 项目班</a></span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" target="_blank">
                                <span class="active-status active-end">已结束</span>
                                <span class="active-title"><a href="https://www.shiguangkey.com/course/2321">Python入门基础班</a></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="side-attention clearfix">
                    <h3 class="attention-title">关注我</h3>
                    <ul class="side-attention-address">
                        <li>
                            <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>Taka</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
                                                                             style="color:rgb(0, 108, 226);"></i>Taka</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
                                                                             style="color:rgb(245,92,110);"></i>Taka</a>
                        </li>
                    </ul>
                    <div class="side-attention-qr">
                        <p>扫码关注</p>
                    </div>
                </div>


            </aside>
            <!-- side end -->

        </div>
    </main>
{% endblock %}

{% block script %}
{% endblock %}

